<template>
  <el-card>
    <!-- 搜索 -->
    <el-row :gutter="20" class="header">
      <el-col :span="4">
        <el-input
          :placeholder="$t('table.placeholder')"
          clearable
          v-model="formQuery.query"
        ></el-input>
      </el-col>
      <el-button type="primary" icon="search" @click="getUser">{{
        $t("table.search")
      }}</el-button>
      <el-button type="primary" icon="plus" @click="handleAdd()">{{
        $t("table.adduser")
      }}</el-button>
    </el-row>
    <!-- 表格 -->
    <gz-table :config="tableConfig" @updateList="getUser">
      <template #action="{ row }">
        <el-button
          size="small"
          type="primary"
          icon="edit"
          @click="handleAdd(row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          icon="delete"
          @click="handleDelete(row)"
          >删除</el-button
        >
      </template>
      <template #create_time="{ row }">
        {{ $filters.filterTime(row.create_time) }}
      </template>
      <template #status="{ row }">
        <el-switch
          v-model="row.mg_state"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="changeStatus(row)"
        ></el-switch>
      </template>
    </gz-table>
  </el-card>
  <!-- 对话框 -->
  <gz-dialog
    v-if="dialogVisible"
    v-model="dialogVisible"
    :dialogTitle="dialogTitle"
    :initData="initData"
    @updateList="getUser"
  ></gz-dialog>
</template>

<script setup>
import { ref } from "vue";
import { getUserList, changeUserType, deleteUsers } from "@/api/user";
import { ElMessage, ElMessageBox } from "element-plus";
import { useI18n } from "vue-i18n";
import { ElLoading } from "element-plus/lib/components/loading";
import gzDialog from "./dialog.vue";
import gzTable from "@/components/Table/index.vue";

const loading = ref(null);
const i18n = useI18n();
const formQuery = ref({
  query: "",
  pagenum: 1,
  pagesize: 10
});
const initData = ref(null);
const dialogVisible = ref(false);
const dialogTitle = ref("");

const tableConfig = ref({
  data: [],
  columns: [
    {
      label: "username",
      prop: "username"
    },
    {
      label: "role_name",
      prop: "role_name"
    },
    {
      label: "mobile",
      prop: "mobile",
      width: 200
    },
    {
      label: "email",
      prop: "email",
      width: 200
    },
    {
      label: "mg_state",
      prop: "mg_state",
      slot: "status"
    },
    {
      label: "create_time",
      prop: "create_time",
      slot: "create_time"
    },
    {
      label: "action",
      prop: "action",
      slot: "action",
      fixed: "right",
      width: 200
    }
  ],
  pagination: {}
});

const startLoading = () => {
  loading.value = ElLoading.service({
    target: document.querySelector(".gz-table"),
    lock: true,
    text: "数据加载中..."
    // background: "rgba(0, 0, 0, 0.8)"
    // spinner: "el-icon-loading"
  });
};

const endLoading = () => {
  loading.value && loading.value.close();
};

const getUser = async (params) => {
  if (params) {
    formQuery.value.pagenum = params.pagenum;
    formQuery.value.pagesize = params.pagesize;
  }
  startLoading();
  const res = await getUserList(formQuery.value);
  tableConfig.value.data = res.users;
  tableConfig.value.pagination.total = res.total;
  endLoading();
};
getUser();

const changeStatus = async (row) => {
  await changeUserType(row.id, row.mg_state);
  ElMessage({
    message: i18n.t("message.updateSuccess"),
    type: "success"
  });
};

const handleAdd = (rowData) => {
  dialogVisible.value = true;
  if (!rowData) {
    initData.value = {};
    dialogTitle.value = "添加用户";
  } else {
    dialogTitle.value = "编辑用户";
    initData.value = JSON.parse(JSON.stringify(rowData));
  }
};
const handleDelete = (rowData) => {
  ElMessageBox.confirm(i18n.t("dialog.deleteTitle"), "", {
    confirmButtonText: i18n.t("dialog.ok"),
    cancelButtonText: i18n.t("dialog.cancel")
  })
    .then(async () => {
      await deleteUsers(rowData.id);
      ElMessage({
        type: "success",
        message: "删除成功！"
      });
      getUser();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除取消！"
      });
    });
};
</script>

<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
  box-sizing: border-box;
}
:deep(.el-input__suffix) {
  align-items: center;
}
</style>
